import React, { Component } from 'react';
import { Link, withRouter } from 'react-router-dom';
import { Menu, Icon, Button } from 'antd';

// import logo from '../../assets/images/logo.png';
import logo from '../../logo.svg';
import menuList from '../../config/menuConfig';
import './index.less';

/**
 * Left Nav
 */
const { SubMenu } = Menu;

class LeftNav extends Component {
    constructor(props) {
        super(props);
        this.state = {
            collapsed: false,
            openKey: ''
        }
    }
    /**
     * 普通循环，不能应对3层及以上菜单的情况
     */
    buildMenu = () => {
        const menuItem = (item) => {
            return (
                <Menu.Item key={item.key}>
                    <Link to={item.key}>
                        <Icon type={item.icon} />
                        <span>{item.title}</span>
                    </Link>
                </Menu.Item>
            );
        }
        
        let menu = (
            <Menu
                defaultSelectedKeys={['/home']}
                // defaultOpenKeys={['sub1']}
                mode="inline"
                theme="dark"
                inlineCollapsed={this.state.collapsed}
            >
                {
                    menuList.map(element => {
                        if (element.subMenu) {
                            return (
                                <SubMenu
                                    key={element.key}
                                    title={
                                        <span>
                                            <Icon type={element.icon} />
                                            <span>{element.title}</span>
                                        </span>
                                    }
                                >
                                    {
                                        element.subMenu.map(subEle => {
                                            return menuItem(subEle);
                                        })
                                    }
                                </SubMenu>
                            );
                        } else {
                            return menuItem(element);
                        }
                    })
                }
            </Menu>
        );
        
        return menu;
    }

    /**
     * array.map + recursion (递归) 可以处理多层子菜单的情况
     */
    buildMenu1 = (menuList) => {
        return menuList.map((element) => {
            if (element.subMenu) {
                // has SubMenu, build and return <SubMenu>. do recursion for sub menus
                return (
                    <SubMenu
                        key={element.key}
                        title={
                            <span>
                                <Icon type={element.icon} />
                                <span>{element.title}</span>
                            </span>
                        }
                    >
                        {
                            this.buildMenu1(element.subMenu)
                        }
                    </SubMenu>
                );
            } else {
                // build and return <Menu.Item>
                return (
                    <Menu.Item key={element.key}>
                        <Link to={element.key}>
                            <Icon type={element.icon} />
                            <span>{element.title}</span>
                        </Link>
                    </Menu.Item>
                );
            }
        });
    }

    /**
     * array.reduce + recursion 可以处理多层子菜单的情况
     */
    buildMenu2 = (menuList) => {
        /**
         * reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。
         * reduct((previousValue, item) => { return currentValue }, initialValue);
         */
        return menuList.reduce((prev, element) => {
            if (element.subMenu) {
                // 取openKey
                const selectedKey = this.props.location.pathname;
                const ownMenu = element.subMenu.find((item) => item.key === selectedKey);
                if (ownMenu) {
                    this.openKey = element.key;
                }
                prev.push(
                    <SubMenu
                        key={element.key}
                        title={
                            <span>
                                <Icon type={element.icon} />
                                <span>{element.title}</span>
                            </span>
                        }
                    >
                        {
                            this.buildMenu2(element.subMenu)
                        }
                    </SubMenu>
                )
            } else {
                prev.push (
                    <Menu.Item key={element.key}>
                        <Link to={element.key}>
                            <Icon type={element.icon} />
                            <span>{element.title}</span>
                        </Link>
                    </Menu.Item>
                )
            }
            return prev;
        }, []);
    }
    
    getOpenKey = (menuList, selectedKey) => {
        let subMenu = menuList.filter((item) => item.subMenu);
        console.log('getOpenKey', subMenu);
        return '';
    }

    /**
     * 第一次render()后执行一次
     */
    componentDidMount() {

    }

    /**
     * 第一次render()前执行一次
     */
    componentWillMount() {
        this.menuNodes = this.buildMenu2(menuList);
    }

    render() {
        /**
         * 我们默认选中/home。
         * 但是如果用户手动输入地址，路由会正确跳转，但是Menu依然选中/home。这样不好
         * 我们通过Chrome -> React Dev Tool(need to download from chrome store) -> Components -> search "admin" -> location -> pathname
         */
        /**
         * 默认情况下，LeftNav不是路由组件，所以没有location, history, match属性
         */
        const selectedKey = this.props.location.pathname;
        // const openKey = this.getOpenKey(menuList, selectedKey);
        console.log(selectedKey, this.openKey);

        return (
            <div className="left-nav">
                <Link className="left-nav-header" to="/home">
                    <img className="App-logo" src={logo} alt="logo" />
                    <h1>管理后台</h1>
                </Link>
                {/* <Menu
                    defaultSelectedKeys={['/home']}
                    defaultOpenKeys={['sub1']}
                    mode="inline"
                    theme="dark"
                    inlineCollapsed={this.state.collapsed}
                >
                    <Menu.Item key="/home" onClick={() => {}}>
                        <Link to="/home">
                            <Icon type="home" />
                            <span>首页</span>
                        </Link>
                    </Menu.Item>
                    <SubMenu
                        key="sub1"
                        title={
                            <span>
                                <Icon type="amazon" />
                                <span>商品</span>
                            </span>
                        }
                    >
                        <Menu.Item key="5">
                            <Link to="/category">
                                <Icon type="unordered-list" />
                                <span>品类维护</span>
                            </Link>
                        </Menu.Item>
                        <Menu.Item key="6">
                            <Link to="/product">
                                <Icon type="car" />
                                <span>商品管理</span>
                            </Link>
                        </Menu.Item>
                    </SubMenu>
                    <Menu.Item key="2">
                        <Link to="/user">
                            <Icon type="user" />
                            <span>用户管理</span>
                        </Link>
                    </Menu.Item>
                    <Menu.Item key="3">
                        <Link to="/role">
                            <Icon type="solution" />
                            <span>角色管理</span>
                        </Link>
                    </Menu.Item>
                    <SubMenu
                        key="sub2"
                        title={
                            <span>
                                <Icon type="area-chart" />
                                <span>图形图表</span>
                            </span>
                        }
                    >
                        <Menu.Item key="7">
                            <Link to="/charts/bar">
                                <Icon type="bar-chart" />
                                <span>柱状图</span>
                            </Link>
                        </Menu.Item>
                        <Menu.Item key="8">
                            <Link to="/charts/line">
                                <Icon type="line-chart" />
                                <span>折线图</span>
                            </Link>
                        </Menu.Item>
                        <Menu.Item key="9">
                            <Link to="/charts/pie">
                                <Icon type="pie-chart" />
                                <span>饼图</span>
                            </Link>
                        </Menu.Item>
                    </SubMenu>
                    <Menu.Item key="4">
                        <Link to="/order">
                            <Icon type="read" />
                            <span>订单管理</span>
                        </Link>
                    </Menu.Item>
                </Menu> */}
                {/* {this.buildMenu()} */}
                <Menu
                    /**
                     * defaultSelectedKeys: 指定默认值后，通过代码更新其值，没有效果
                     * selectedKeys: 总是根据最新的key显示效果
                     */
                    selectedKeys={[selectedKey]}
                    defaultOpenKeys={[this.openKey]}
                    mode="inline"
                    theme="dark"
                    inlineCollapsed={this.state.collapsed}
                >
                    {/* {this.buildMenu1(menuList)} */}
                    {this.menuNodes}
                </Menu>
            </div>
        )
    }
}

/**
 * 把LeftNav包装成路由组件
 */
export default withRouter(LeftNav);
